@import '../../theme/mixins/mixins.scss';
@import '../../theme/default.scss';

@include b(switch) {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 58px;
  height: 38px;
  padding: 12px;
  vertical-align: middle;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;

  @include m(default) {
    @include e(node) {
      background-color: $--color-black-bg;
    }
    @include e(circle) {
      background-color: $--color-white;
    }
  }
  @each $key, $color in $--colors {
    @include m($key) {
      @include e(node) {
        background-color: $color;
      }
      @include e(circle) {
        background-color: $color;
      }
    }
  }

  @include m(disabled) {
    cursor: not-allowed;
    user-select: none;
    @include e(node) {
      background-color: $--color-disabled;
    }
    @include e(circle) {
      background-color: $--color-white;
    }
  }

  &:focus {
    outline: 0;
  }

  @include m(checked) {
    @include e(ripple) {
      transform: translateX(40%);
      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }
  }

  @include e(node) {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: $--color-black-bg;
    border-radius: 7px;
    opacity: 0.5;
  }
  @include e(ripple) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }
  @include e(circle) {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    background-color: $--color-white;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
      0 2px 1px -1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    pointer-events: none;
  }
}
